<template>
  <div class="mui-slider">
    <div class="mui-slider-group mui-slider-loop">
      <!--支持循环，需要重复图片节点-->
        <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img :src="parent_imglist[parent_imglist.length-1].imgurl" /></a></div>
        <div v-for="item in parent_imglist" class="mui-slider-item">
          <router-link :to="{ name: item.path}"><img :src="item.imgurl" /></router-link>
        </div>
        <!--支持循环，需要重复图片节点-->
        <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img :src="parent_imglist[0].imgurl" /></a></div>
    </div>

    <div class="mui-slider-indicator">
      <div v-for="(item,index) in parent_imglist" class="mui-indicator mui-active" v-if="index == 0"></div>
      <div class="mui-indicator" v-else></div>
    </div>
  </div>
</template>

<script>
  import $ from 'jquery'
      export default {
        name: "Carousel",
        mounted(){
          $(function () {
            //获得slider插件对象
            var gallery = mui('.mui-slider');
            gallery.slider({
              interval:3000//自动轮播周期，若为0则不自动播放，默认为0；
            });
          })

        },
        data() {
          return {
            parent_imglist: [],
          }
        },
        props: [
          'imglist',
        ],
        created() {
          this.parent_imglist = this.imglist;
          for(var i=0;i<this.parent_imglist.length;i++){
            this.parent_imglist[i].imgurl = require('../../../static/img/'+this.parent_imglist[i].imgurl);
          }
        },
      }
</script>

<style scoped>

</style>
